<template lang="pug">
  .tab-1
    Table.hasTitle-table.beautiful-table(:columns="thead" :data="salesContractList")
      //- .pr-24.pl-24(slot="header")
      //-   .pull-right
      //-     Button.mr-15(type="info" size="small" @click="addContact") 添加联系人
      template(slot-scope="{ row, index }" slot="brief")
        .u-d-info {{row.brief}}
      template(slot-scope="{ row, index }" slot="fujian")
        Poptip(trigger="hover" title="合同附件")
          div(slot="content")
            .u-d-info(v-for="(item, index) in row.attachments" :key="index" @click="downLoadAttachment(item.id, item.name)") {{item.name}}
          Button 查看
      template(slot-scope="{ row, index }" slot="action")
        Button.mr-10(type="text" size="small" @click="reviseBtn(row)") 修改
        //- Button(type="text" size="small") 删除
    Modal(v-model="reviseModal" title="签约")
      Form(ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="130")
        FormItem.mb-5(label="所属需求：")
          div {{formValidate.brief}}
        FormItem.mb-5(label="签约时间：" prop="signTime")
          DatePicker(:value="formValidate.signTime" type="date" placeholder="请选择" style="display: block" @on-change="signTimeChange")
        FormItem.mb-5(label="签约金额：" prop="amt")
          Input(v-model="formValidate.amt" placeholder="请输入")
        //- FormItem.mb-5(label="合同编号：")
        //-   Input(v-model="formValidate.code" placeholder="请输入")
        FormItem.mb-5(label="签约合同：")
          div
            Upload(:before-upload="createHandleUpload" multiple ref="addUpload" :show-upload-list="true" action="" style="display:inline-block" :headers="headers")
              Button(type="info" icon="ios-cloud-upload-outline" style="width:200px") 点击上传
            span.ml-10(v-show="hasFile" style="color:#ed4014") 请选择方案附件
          template(v-for="(item, index) in formValidate.attachments")
            .my-tag.mr-20
              .my-tag-inner {{item.name}}
              .img-close.ivu-icon.ivu-icon-ios-close(@click="deleteAttachment(item.id, index)")
          template(v-for="(item, index) in fileArr")
            .my-tag.mr-20
              .my-tag-inner {{item.name}}
              .img-close.ivu-icon.ivu-icon-ios-close(@click="deleteFile(index)")
        FormItem.mb-5(label="合同开始时间：" prop="startDate")
          DatePicker(:value="formValidate.startDate" type="date" placeholder="请选择" style="display: block" @on-change="startDateChange")
        FormItem.mb-5(label="合同结束时间：" prop="endDate")
          DatePicker(:value="formValidate.endDate" type="date" placeholder="请选择" style="display: block" @on-change="endDateChange")
        FormItem.mb-5(label="合同年限：" prop="duration")
          Input(v-model="formValidate.duration" placeholder="请输入")
        FormItem.mb-5(label="开票金额：" prop="invoiceAmt")
          Input(v-model="formValidate.invoiceAmt" placeholder="请输入")
        FormItem.mb-5(label="开票时间：" prop="invoiceTime")
          DatePicker(:value="formValidate.invoiceTime" type="date" placeholder="请选择" style="display: block" @on-change="invoiceTimeChange")
        FormItem.mb-5
          Button(icon="ios-cloud-download-outline" @click="") 项目合同模板下载
      template(slot="footer")
        Button(type="info" @click="handleSubmit('formValidate')") 提交
        Button(@click="reviseModal = false") 取消
</template>

<script>
import HRDCCustomerApi from '@/api/HRDCCustomer.api.js'
import Mixin from '../detailMixin.js'
import Cookies from 'js-cookie'

export default {
  props: {
    salesContractList: Array
  },
  data () {
    return {
      headers: {
        'Authorization': 'Bearer ' + Cookies.get('clientToken')
      },
      isCheck: true,
      reviseModal: false,
      thead: [
        {
          title: '新增时间',
          minWidth: 150,
          render: (h, params) => {
            let row = params.row
            let times = ''
            if (row.createTime) {
              times = row.createTime.slice(0, 19).replace(/T/g, ' ')
            }
            return h('span', times)
          }
        },
        {
          title: '需求编号',
          minWidth: 100,
          key: 'requirementCode'
        },
        {
          title: '客户需求',
          minWidth: 100,
          slot: 'brief'
        },
        {
          title: '签约时间',
          minWidth: 120,
          render: (h, params) => {
            let row = params.row
            let times = ''
            if (row.signTime) {
              times = row.signTime.slice(0, 10)
            }
            return h('span', times)
          }
        },
        {
          title: '合同编号',
          minWidth: 100,
          key: 'code'
        },
        {
          title: '合同附件',
          minWidth: 100,
          slot: 'fujian'
        },
        {
          title: '签约金额',
          minWidth: 100,
          key: 'amt'
        },
        {
          title: '开票金额',
          minWidth: 100,
          key: 'invoiceAmt'
        },
        {
          title: '开票时间',
          minWidth: 100,
          render: (h, params) => {
            let row = params.row
            let times = ''
            if (row.invoiceTime) {
              times = row.invoiceTime.slice(0, 10)
            }
            return h('span', times)
          }
        },
        {
          title: '记录销售',
          minWidth: 100,
          key: 'createrName'
        },
        {
          title: '操作',
          minWidth: 140,
          slot: 'action'
        }
      ],
      formValidate: {},
      fileArr: [], // 合同附件
      hasFile: false,
      ruleValidate: {
        signTime: [
          { required: true, message: '签约时间不能为空', trigger: 'change' }
        ],
        amt: [
          { type: 'number', required: true, message: '签约金额不能为空', trigger: 'blur' }
        ],
        startDate: [
          { required: true, message: '开始时间不能为空', trigger: 'change' }
        ],
        endDate: [
          { required: true, message: '结束时间不能为空', trigger: 'change' }
        ],
        duration: [
          { required: true, message: '合同年限不能为空', trigger: 'blur' }
        ],
        invoiceAmt: [
          { type: 'number', required: true, message: '开票金额不能为空', trigger: 'blur' }
        ],
        invoiceTime: [
          { required: true, message: '开票时间不能为空', trigger: 'change' }
        ]
      }
    }
  },
  mixins: [Mixin],
  methods: {
    reviseBtn (obj) {
      this.formValidate = obj
      this.reviseModal = true
    },
    handleSubmit (name) {
      this.$refs[name].validate((valid) => {
        console.log(this.formValidate)
        if (valid) {
          if (this.fileArr.length + this.formValidate.attachments.length > 0) {
            let formData = new FormData()
            formData.append('id', this.formValidate.id)
            formData.append('rowVersion', this.formValidate.rowVersion)
            formData.append('signTime', this.formValidate.signTime)
            formData.append('amt', this.formValidate.amt)
            formData.append('startDate', this.formValidate.startDate)
            formData.append('endDate', this.formValidate.endDate)
            formData.append('duration', this.formValidate.duration)
            formData.append('invoiceAmt', this.formValidate.invoiceAmt)
            formData.append('invoiceTime', this.formValidate.invoiceTime)

            formData.append('customerId', this.formValidate.customerId)
            formData.append('requirementId', this.formValidate.requirementId)
            this.fileArr.forEach(item => {
              formData.append('atta', item)
            })

            HRDCCustomerApi.PostSalesContract(formData).then((res) => {
              if (res.data.success) {
                this.$Message.success(res.data.message)
                this.reviseModal = false
                this.fileArr = []
                this.$emit('get-list')
              } else {
                this.$Message.error({
                  content: res.data.message,
                  duration: 10,
                  closable: true
                })
              }
            })
          } else {
            this.hasFile = true
          }
        } else {
          this.$Message.warning('有必填项未填!')
        }
      })
    },
    // 上传方案附件
    createHandleUpload (file) {
      this.fileArr.push(file)
      this.hasFile = false
      console.log(this.fileArr)
      return false
    },
    deleteFile (index) {
      this.fileArr.splice(index, 1)
    },
    deleteAttachment (id, index) {
      HRDCCustomerApi.DeleteAttachment({
        id: id
      }).then(res => {
        this.formValidate.attachments.splice(index, 1)
        console.log(res)
      })
    },
    signTimeChange (val) {
      this.formValidate.signTime = val
    },
    startDateChange (val) {
      this.formValidate.startDate = val
    },
    endDateChange (val) {
      this.formValidate.endDate = val
    },
    invoiceTimeChange (val) {
      this.formValidate.invoiceTime = val
    }
  }
}
</script>

<style>

</style>
